<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery.js"></script>
    <script src="./js/bootstrap.js"></script>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div class="container" id="app" style="width: 80%;margin: 80px auto;">
        <table class="table table-bordered table-hover">
            <h1 class="text-center text-info">购物车</h1>
            <thead>
                <tr class="text-danger">
                    <th class="text-center">
                        <label><input type="checkbox" v-model="allState" @change="checkAll">全选</label>
                    </th class="text-center">
                    <th class="text-center">商品编号</th>
                    <th class="text-center">商品名称</th>
                    <th class="text-center">购买数量</th>
                    <th class="text-center">商品单价</th>
                    <th class="text-center">商品总价</th>
                    <th class="text-center">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr class="text-center" v-for="(p,index) in products">
                    <td>
                        <input type="checkbox" v-model="p.state" @change="checkItem">
                    </td>
                    <td>{{p.id}}</td>
                    <td>{{p.name}}</td>
                    <td style="width: 120px;">
                        <div class="input-group  input-group-sm" >
                            <span class="input-group-addon" @click="p.count<=0?p.count=0:p.count--">-</span>
                            <input type="text" class="form-control" style="text-align: center;" :value="p.count">
                            <span class="input-group-addon" @click="p.count++">+</span>
                        </div>
                    </td>
                    <td>￥{{p.price}}</td>
                    <td>￥{{p.price*p.count}}</td>
                    <td>
                        <button class="btn btn-danger btn-sm" @click="remove(index)">删除</button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr class="text-center text-muted">
                    <td colspan="7">暂无商品……</td>
                </tr>
                <tr class="text-center text-muted">
                    <td>
                        <button class="btn btn-danger btn-sm" @click="remove(-2)">部分删除</button>
                    </td>
                    <td colspan="2">已选择:{{select}}</td>
                    <td colspan="2">合计:{{sum}}</td>
                    <td colspan="2">
                        <button class="btn btn-danger btn-sm" @click="remove(-1)">清空</button>
                        <button class="btn btn-primary btn-sm">下单</button>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            products: [
                { id: 10001, name: "小米手机", count: 0, price: 3200, state:false},
                { id: 10002, name: "华为电脑", count: 0, price: 6400, state:false},
                { id: 10003, name: "晨光铅笔*12", count: 0, price: 16, state:false},
                { id: 10004, name: "羽绒服", count: 0, price: 600, state:false}
            ],
            allState:false
         },
         methods: {
             checkAll(){
                this.products.forEach((item,index) => {
                    item.state = this.allState;
                });
             },
             checkItem(){
                // 如果数组中的所有的 元素 state 都为 true this.allState=true
                // 如果数组中只要有一个 元素 state 都为 false this.allState=false
                // this.allState = true;// 假设都为true
                 this.allState=this.products.length>0;
                 this.products.forEach((item,index) => {
                     if(!item.state){
                         this.allState=false;
                         return;
                     }
                 });
             },
             remove(index){
                if(index>=0){
                    if(this.products[index].state){
                        this.products.splice(index,1);
                    }
                }
                if(index==-1){
                    this.products=[];
                }
                if(index==-2){
                    // for (let i = 0; i < this.users.length; i++) {
                    //     if(this.users[i].state){
                    //         this.users.splice(i,1);
                    //     }
                    // }
                    // 循环中出现了对循环本体数据的操作，该操作是否会影响循环界限
                    // 倒叙循环
                    for (let i = this.products.length-1; i >= 0 ; i--) {
                        if(this.products[i].state){
                            this.products.splice(i,1);
                        }
                    }
                }
                this.checkItem();
             }
         },
         computed: {
             select:function(){
                 let count=0;
                 for (let key in this.products) {
                    if(this.products[key].state){
                        count++;
                    }
                 }
                 return count;
             },
             sum:function(){
                 let sumPrice=0;
                 this.products.forEach((p,index) => {
                     if(p.state){
                        sumPrice+=p.price*p.count;
                     }
                 });
                 return sumPrice;
             }
         },
    })

</script>

</html>